<template>
    <div class="ml-16px mr-16px content-container">
        <div class="flex items-center pt-26px pl-26px pr-26px">
            <Remind v-if="isShowRemind" @update:data="isShowRemind = !isShowRemind">
                <template #title>
                    <b>温整提示：</b> 
                </template>
                <template #content>
                    不是互相关注且客户主动咨询行为，最多可给发送3条私信，客户回复私信给商家后，4小时内可再发6条私信
                </template>
            </Remind>
        </div>
        <div class="flex pt-26px pl-26px pr-26px business-data">
            <ul>
                <li v-for="item in state.businessData" :key="item.title">
                    <div class="item">
                        <div class="icon"><i></i></div>
                        <b>{{ item.count }}</b>
                        <p>{{ item.title }}<el-tooltip placement="top" :content="item.content"><svg-icon size="14px" icon-class="information-2-fill" class="ml-5px" v-if="item.content != ''"></svg-icon></el-tooltip></p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="pt-26px pl-26px pr-26px">       
            <Tabs v-model="activeIndex" @update:model-value="handleTabClick" active-color="#ffffff">
                <TabItem label="意向" path="" :index="0">
                    <Intention />
                </TabItem>
                <TabItem label="私信" path="" :index="1">
                    <h1>内容二</h1>
                </TabItem>
                <TabItem label="评论" path="" :index="2">
                    <h1>内容三</h1>
                </TabItem>
                <TabItem label="拓客" path="" :index="3">
                    <h1>内容四</h1>
                </TabItem>
            </Tabs>
        </div>
    </div>
</template>

<script setup lang="ts">
import Tabs from '@/components/Tab/First.vue'
import TabItem from '@/components/Tab/Item.vue'
import Intention from './components/Intention.vue'

const isShowRemind = ref(true)

const activeIndex = ref(0)

const state = reactive({
    businessData:[
        {
            title:'商机线索总量',
            count:86,
            content:'包括意向、评论、拓客、私信等商机用户总量'
        },
        {
            title:'意向商机用户',
            count:14,
            content:''
        },
        {
            title:'评论商机用户',
            count:35,
            content:''
        },
        {
            title:'拓客商机用户',
            count:27,
            content:'统计通过拓客裂变获取到的商机用户'
        },
        {
            title:'私信商机用户',
            count:29,
            content:'统计通过私信获取到的商机用户'
        },
    ]
})

function handleTabClick(val:any) {
    activeIndex.value = val.index
}
</script>

<style lang="scss" scoped>
.business-data{
    ul{
        width: calc(100% + 12px);
        overflow: hidden;
        margin: 0 -6px;
        li{
            width: 20%;
            float: left;
            padding: 0 6px;
            .item{
                height: 80px;
                border-radius: 6px;
                background: #f3f5fd;
                position:relative;
                overflow: hidden;
                .icon{
                    width: 40px;
                    height:40px;
                    border-radius: 50%;
                    background-color: #fff;
                    position:absolute;
                    z-index: 2;
                    left: 20px;
                    top: 20px;
                    i{
                        position:absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%,-50%);
                        width: 24px;
                        height: 24px;
                        background:url('@/assets/images/bd-icon-1.png') no-repeat 0 0;
                        background-size: contain;
                    }
                }
                b{
                    position:absolute;
                    z-index: 3;
                    top: 15px;
                    left: 130px;
                    font-size: 24px;
                    font-family: 'DIN Web';
                }
                p{
                    position:absolute;
                    z-index: 4;
                    bottom: 20px;
                    left: 130px;
                    font-size: 14px;
                    color: #999;
                }
                &::before{
                    content:'';
                    width: 90px;
                    height: 80px;
                    position:absolute;
                    z-index: 1;
                    left: 0;
                    top: 0;
                    background:url('@/assets/images/bd-1.png') no-repeat 0 0;
                    background-size: contain;
                }
            }
            
            &:nth-child(2){
                .item{
                    background: #fff5f0;
                    .icon{
                        i{
                            height: 24px;
                            background-image:url('@/assets/images/bd-icon-2.png');
                        }
                    }
                    &::before{
                        content:'';
                        background:url('@/assets/images/bd-2.png') no-repeat 0 0;
                        background-size: contain;
                    }
                }
            }
            &:nth-child(3){
                .item{
                    background: #ecfaf4;
                    .icon{
                        i{
                            background-image:url('@/assets/images/bd-icon-3.png');
                        }
                    }
                    &::before{
                        content:'';
                        background:url('@/assets/images/bd-3.png') no-repeat 0 0;
                        background-size: contain;
                    }
                }
            }
            &:nth-child(4){
                .item{
                    background: #f6f4fd;
                    .icon{
                        i{
                            height: 20px;
                            background-image:url('@/assets/images/bd-icon-4.png');
                        }
                    }
                    &::before{
                        content:'';
                        background:url('@/assets/images/bd-4.png') no-repeat 0 0;
                        background-size: contain;
                    }
                }
            }
            &:nth-child(5){
                .item{
                    background: #fff3f3;
                    .icon{
                        i{
                            height: 20px;
                            background-image:url('@/assets/images/bd-icon-5.png');
                        }
                    }
                    &::before{
                        content:'';
                        background:url('@/assets/images/bd-5.png') no-repeat 0 0;
                        background-size: contain;
                    }
                }
            }
        }
    }
}
</style>